<template>
  <div class="wrapper">
    <!-- 顶部个人信息卡片 -->
    <div class="profile-card">
      <div class="user-info">
        <img :src="userAvatar" alt="用户头像" class="avatar">
        <div class="user-details">
          <h2>{{ userName }}</h2>
          <p>{{ userPhone }}</p>
        </div>
      </div>
      <div class="member-info">
        <i class="material-icons">stars</i>
        <span>超级会员</span>
      </div>
    </div>

    <!-- 功能列表 -->
    <div class="function-list">
      <div class="function-group">
        <div class="function-item" @click="toAddress">
          <i class="material-icons">location_on</i>
          <span>收货地址</span>
          <i class="material-icons">chevron_right</i>
        </div>
        <div class="function-item" @click="toFavorites">
          <i class="material-icons">favorite</i>
          <span>我的收藏</span>
          <i class="material-icons">chevron_right</i>
        </div>
      </div>

      <div class="function-group">
        <div class="function-item" @click="toSettings">
          <i class="material-icons">settings</i>
          <span>设置</span>
          <i class="material-icons">chevron_right</i>
        </div>
        <div class="function-item" @click="toHelp">
          <i class="material-icons">help</i>
          <span>帮助与反馈</span>
          <i class="material-icons">chevron_right</i>
        </div>
      </div>
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-button" @click="logout">
      退出登录
    </div>

    <!-- 底部导航 -->
    <Footer />
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
  name: 'Profile',
  data() {
    return {
      userAvatar: require('@/assets/super_member.png'),
      userName: '未登录',
      userPhone: '点击登录账号'
    }
  },
  created() {
    const user = this.$getSessionStorage('user');
    if (user) {
      this.userName = user.userName;
      this.userPhone = user.userPhone;
    }
  },
  components: {
    Footer
  },
  methods: {
    toAddress() {
      this.$router.push('/address');
    },
    toFavorites() {
      this.$router.push('/favorites');
    },
    toSettings() {
      this.$router.push('/settings');
    },
    toHelp() {
      this.$router.push('/help');
    },
    logout() {
      this.$removeSessionStorage('user');
      this.$router.push('/login');
    }
  }
}
</script>

<style scoped>
.wrapper {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 14vw;
}

.profile-card {
  background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-primary-container));
  padding: 24px 16px;
  color: white;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 32px;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.user-details h2 {
  font-size: 20px;
  margin-bottom: 4px;
}

.user-details p {
  font-size: 14px;
  opacity: 0.8;
}

.member-info {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.function-list {
  margin-top: 12px;
}

.function-group {
  background-color: white;
  margin-bottom: 12px;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f5f5f5;
}

.function-item:last-child {
  border-bottom: none;
}

.function-item i:first-child {
  color: var(--md-sys-color-primary);
  margin-right: 12px;
}

.function-item span {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.function-item i:last-child {
  color: #999;
}

.logout-button {
  margin: 24px 16px;
  background-color: white;
  color: #ff4d4f;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.logout-button:active {
  opacity: 0.8;
}
</style> 